<template>
    <div class="content" :style="{direction: lang.rtl ? 'rtl' : 'ltr'}">
      <h3 style="text-align:center;">{{ lang.create_database_description }}</h3>
      <div class="row">
          <span class="col">{{ lang.supported_database_engines }}&nbsp;&nbsp;</span>
          <Select :placeholder="lang.please_select_a_database_engine" v-model="data.connection.database" class="selector col1">
              <Option v-for="item in dataBases" :key="item.database" :value="item.database">{{ item.database }}</Option>
          </Select>
      </div>
      <div class="row">
          <span class="col">{{ lang.jdbc_driver }}</span>
          <Input class="input-driver col1" :placeholder="lang.jdbc_driver" v-model="data.connection.driverClass">
              <Icon type="android-settings" :slot="start_slot"></Icon>
          </Input>
          <span class="col2">{{ lang.if_you_no_provide_jdbc_driver_then_this_is_not_required }}</span>
      </div>
      <div class="row">
          <span class="col">{{ lang.jdbc_url }}</span>
          <Input class="col1" :placeholder="lang.jdbc_url" v-model="data.connection.jdbcUrl">
              <Icon type="link" :slot="start_slot"></Icon>
              <!-- <p :slot="start_slot">Fuckkkkkkkk</p> -->
          </Input>
          <span class="col2">{{ lang.without_database_name }}</span>
      </div>
      <div class="row">
          <span class="col">{{ lang.database_name }}</span>
          <Input class="input-driver col1" :placeholder="lang.database_name" v-model="data.databaseName">
              <Icon type="android-settings" :slot="start_slot"></Icon>
          </Input>
      </div>
      <template v-if="data.connection.requiredPassword">
          <div class="row">
              <span class="col">{{ lang.user_name }}</span>
              <Input class="col1" :placeholder="lang.user_name" v-model="data.connection.userName">
                  <Icon type="person" :slot="start_slot"></Icon>
              </Input>
          </div>
          <div class="row">
              <span class="col">{{ lang.password }}</span>
              <Input class="col1" type="password" :placeholder="lang.password" v-model="data.connection.password" >
                  <Icon type="person" :slot="start_slot"></Icon>
              </Input>
          </div>
      </template>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { MyHttpClient, Api } from "../../../api";
import { DataBaseCreationConfig } from "../../../Entities/DataBaseCreationConfig";

function client() {
  return new MyHttpClient();
}

const EVENT = "CHANGE";
const DATA = "data";

export default {
  model: {
    event: EVENT,
    prop: DATA
  },
  props: {
    data: {
      required: true,
      type: Object,
      validator: DataBaseCreationConfig.isValid
    }
  },
  data() {
    return {
      dataBases: []
      //   data: {
      //     database: "",
      //     driverClass: "",
      //     userName: "",
      //     password: "",
      //     maxPoolSize: 0,
      //     minPoolSize: 0,
      //     jdbcUrl: "",
      //     initialPoolSize: 0,
      //     requiredPassword: true
      //   }
    };
  },
  watch: {
    "data.databaseName"(){
      this.changed()
    },
    "data.connection.database"(newVal, oldVal) {
      const dbConfig = this.getDataBaseConfig(newVal);
      this.data.connection.driverClass = dbConfig.driverClass;
      this.data.connection.requiredPassword = dbConfig.requiredPassword;
      this.data.connection.jdbcUrl = dbConfig.jdbcUrl;
      this.changed()
    },
    "data.connection.driverClass"(){
        this.changed()
    },
    "data.connection.userName"(){
        this.changed()
    },
    "data.connection.password"(){
        this.changed()
    },
    "data.connection.jdbcUrl"(){
        this.changed()
    },
    "data.connection.requiredPassword"(){
        this.changed()
    },
  },
  computed: {
    lang() {
      return this.$store.state.lang;
    },
    ...mapState("webServer", ["status"]),
    loadedDataBaseConfig() {
      return this.status.currentDataBase;
    },
    start_slot() {
      return this.lang.rtl ? "append" : "prepend";
    },
    end_slot() {
      return !this.lang.rtl ? "append" : "prepend";
    }
  },
  methods: {
    getDataBaseConfig(databaseName) {
      return this.dataBases.filter(item => item.database.toLowerCase() == databaseName.toLowerCase())[0];
    },
    changed() {
        this.$emit(EVENT, this.data)
    }
  },
  async created() {

    this.dataBases = (await client().get(Api.webServer.availableDataBases())).data;

    this.data.connection.database = this.loadedDataBaseConfig.database;
    this.data.connection.driverClass = this.loadedDataBaseConfig.driverClass;
    this.data.connection.userName = this.loadedDataBaseConfig.userName;
    this.data.connection.password = this.loadedDataBaseConfig.password;
    this.data.connection.jdbcUrl = this.loadedDataBaseConfig.jdbcUrl;
  }
};
</script>

<style lang="scss" scoped>
$col: 150px;
$col1: 300px;
$col2: 200px;

.ivu-input-group {
  display: inline-table;
}

.content {
  overflow: auto;
  padding: 20px;
  // border: {
  //     color: #efefef;
  //     style: solid;
  //     width: 1px;
  // }
}
.col {
  display: inline-block;
  width: $col;
}
.col1 {
  width: $col1;
  &,
  input {
    direction: ltr;
  }
}
.col2 {
  color: rgb(255, 92, 92);

  margin: {
    right: 10px;
    left: 10px;
  }
}
.row {
  // border: {
  //     color: red;
  //     width: 1px;
  //     style: solid;
  // }
  margin: {
    top: 10px;
  }
}
</style>
